<template>
    <div>
        <div class="top-div">
            <el-row>
                <el-col :span="2">
                    <el-button v-if="$store.state.authList.indexOf('index:home:update')!=-1" icon="el-icon-position" @click="formData" type="primary">保 存</el-button>
                </el-col>
            </el-row>
        </div>
        <div style="position: relative;">
            <div style="position:absolute;right: 0px;top:-50px;z-index: 12">
                <iphone :form="form"></iphone>
            </div>
            
            <!-- 表单 -->
            <div style="margin-top: 30px;background-color: white;padding: 30px;height: calc( 100vh - 278px )">
                <el-form ref="form" :model="form" label-width="100px">
                    <!-- 首页轮播表单数据部分 -->
                    <el-form-item label="首页轮播图:">
                        <el-upload
                                :action="$store.state.uploadAction"
                                list-type="picture-card"
                                :limit="4"
                                accept=".jpg,.png"
                                :on-preview="handlePictureCardPreview"
                                :on-success="handleSuccess"
                                :on-exceed="overLimt"
                                :file-list="fileList"
                                :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,不超过四张</div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>

                    <!-- 通知部分 -->
                    <el-form-item label="通知:">
                        <el-input style="max-width: 70%" v-model="form.natice"></el-input>
                    </el-form-item>

                    <!-- 手机端的布置 -->
                    <div style="width: 363px">
                        <van-grid :border="false" :gutter="10" :column-num="4">
                            <van-grid-item v-for="(item,index) in form.columnsList" :key="index"
                                           @click="updateColums(index)">
                                <div style="width: 59px;height: 59px">
                                    <van-image round fit="fill" :src="item.imgUrl" style="width: 59px;height: 59px"/>
                                </div>
                                <div style="font-size: 10px;margin-top: 4px">
                                    {{item.title}}
                                </div>
                            </van-grid-item>
                        </van-grid>
                    </div>

                    <!-- 首页筛选 -->
                    <el-form-item label="首页筛选:">
                        <el-button size="small" icon="el-icon-plus" type="primary" @click="addSection">点击添加</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        

        <el-dialog :before-close="handleClose" :visible.sync="dialog" width="30%">
            <el-form ref="form" label-width="80px">

                <el-form-item label="图标：">
                    <el-upload
                            class="avatar-uploader"
                            :action="$store.state.uploadAction"
                            :show-file-list="false"
                            accept=".jpg,.png"
                            :on-success="handleAvatarSuccess">
                        <img v-if="formScreen.imgUrl" :src="formScreen.imgUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="标题:">
                    <el-select v-model="formScreen.id" placeholder="请选择">
                        <el-option
                                v-for="item in section"
                                :key="item.value"
                                :label="item.label"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="savecolumn">确 定</el-button>
              </span>
        </el-dialog>

        <el-dialog :before-close="handleClose" :visible.sync="dialogUpdate" width="30%">
            <el-form ref="form" label-width="80px">
                <el-form-item label="图标：">
                    <el-upload
                            class="avatar-uploader"
                            :action="$store.state.uploadAction"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                        <img v-if="formScreen.imgUrl" :src="formScreen.imgUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                
                <el-form-item label="标题:">
                    <el-select @change="selectChange" v-model="formScreen.id" placeholder="请选择" >
                        <el-option
                                v-for="item in section"
                                :key="item.value"
                                :label="item.label"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
               <el-button type="danger" @click=" ">删 除</el-button>
                <el-button type="primary" @click="saveUpdate">修 改</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    import iphone from "../phone/iphone";
    import homeApi from "../../api/homepageApi";
    import sectionApi from "../../api/sectionApi";
    import util from "../../util/util";

    export default {
        name: "homePage",
        data() {
            return {
                formScreen: {
                    imgUrl: '',
                    id: "",
                    title: "",
                    parentId:""
                },
                dialogVisible: false,
                dialogUpdate: false,
                dialogImageUrl: "",
                dialog: false,
                index: 0,
                form: {
                    id: "",
                    imgUrl: [],
                    natice: "",
                    columnsList: [],
                },
                fileList: [],
                section:[]
            }
        },
        mounted() {
            this.getdata()
            this.listSection()
        },
        methods: {
            selectChange(value){
                this.section.forEach(item=>{
                   if( item.id==value)
                       this.formScreen.parentId=item.parentId
                })
            },
            listSection(){
              sectionApi.listChildren().then(res=>{
                    this.section=res.data
              })
            },
            deleteColumn() {
                this.form.columnsList.splice(this.index, 1)
                this.dialogUpdate = false
                this.formScreen = {
                    imgUrl: '',
                    id: "",
                    title: "",
                    parentId:""
                }
            },
            saveUpdate(){
                // this.form.columnsList[this.index]=this.formScreen
                this.$set(this.form.columnsList,this.index,this.formScreen)
                this.dialogUpdate = false
                this.formScreen = {
                    imgUrl: '',
                    id: "",
                    title: "",
                    parentId:""
                }
            },
            updateColums(index) {
                this.index = index
                this.dialogUpdate = true
                this.formScreen = JSON.parse(JSON.stringify(this.form.columnsList[index]));
            },
            getdata() {
                homeApi.get().then(res => {
                    this.form = res.data
                    this.fileList = []
                    this.form.imgUrl.forEach(item => {
                        this.fileList.push({
                            url: item
                        })
                    })
                })
            },
            formData() {
                if(!util.isUnique(this.form.columnsList,'id'))
                {
                    this.$alert("不能包含重复的首页筛选","提示",{
                        type: "error"
                    })
                    return
                }
                if (this.form.id == "" || this.form.id == null) {
                    homeApi.save(this.form).then(res => {
                        this.getdata()
                    })
                } else {
                    homeApi.update(this.form).then(res => {
                        this.getdata()
                    })
                }

            },
            handleAvatarSuccess(res, file) {
                this.formScreen.imgUrl = res.data
            },
            addSection(){
                if (this.form.columnsList.length >= 8) {
                    this.$message.error('最多添加八个');
                    return
                }
                this.dialog=true
            },
            savecolumn() {
                if (this.form.columnsList.length >= 8) {
                    this.$message.error('最多添加八个');
                    return
                }
                this.dialog = false
                this.form.columnsList.push(this.formScreen)
                this.formScreen = {
                    imgUrl: '',
                    id: "",
                    title: "",
                    parentId:""
                }
            },
            seSwiper() {
                this.form.imgUrl = []
                console.log(this.fileList)
                this.fileList.forEach(item => {
                    if (!item.url.startsWith("http"))
                        this.form.imgUrl.push(item.response.data)
                    else
                        this.form.imgUrl.push(item.url)
                })
            },
            overLimt() {
                this.$message.error('最多上传四张图片');
            },
            handlePictureCardPreview(file) {
                this.dialogVisible = true;
                this.dialogImageUrl = file.url
            },
            handleRemove(file, fileList) {
                this.fileList = fileList
                this.seSwiper()
            },
            handleSuccess(response, file, fileList) {
                this.fileList = fileList
                this.seSwiper()
            },
            handleClose(done) {
                this.formScreen = {
                    imgUrl: '',
                    id: "",
                    title: ""
                }
                done()
            }
        },
        watch:{
          "formScreen.id"(val){
              if(val!=""&&val!=null){
                  let ret=this.section.filter(n=>{
                      return n.id == val
                  })
                  if(ret.length>0){
                      this.formScreen.title=ret[0].label
                  }
              }
          }
        },
        components: {
            iphone
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        background-color: #fbfdff;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
        border: 1px dashed #d9d9d9;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .van-image--round img{
        border-radius: 8px!important;
    }
    .van-image--round{
        border-radius: 8px!important;
    }
</style>